<template>
  <div class="f-tag-list" :style="{left: $store.state.isclapse ? '65px' : '250px'}">
    <el-tabs
        v-model="activeTab"
        type="card"
        style="min-width:100px"
        @tab-remove="deleteTab"
        @tab-change="changeTab"
    >
      <el-tab-pane
          v-for="item in tabList"
          :key="item.path"
          :label="item.title"
          :name="item.path"
          :closable="item.path != '/'"
      >
      </el-tab-pane>
    </el-tabs>
    <span class="tag-btn">
             <el-dropdown @command="handleClose">
                <span class="el-dropdown-link">
                    <el-icon>
                        <arrow-down />
                    </el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item command="clearOther">关闭其他</el-dropdown-item>
                        <el-dropdown-item command="clearAll">全部关闭</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </span>
  </div>
  <div style="height:44px">
  </div>
</template>


<script setup>
import { ref } from 'vue'
import { useRoute, onBeforeRouteUpdate } from 'vue-router';
import { useCookies } from '@vueuse/integrations/useCookies'
import { router } from '@/router';
const route = useRoute()
const cookie = useCookies()

const activeTab = ref(route.path)
const tabList =  ref([
  {
    title: '后台首页',
    path: "/"
  }
])
//  先初始化一下tab
const initTab = () => {
  let tbs = cookie.get("tabList")
  if (tbs) {
    tabList.value = tbs
  }
}
initTab()
const addTab = (tab) => {
  let havetab = tabList.value.find(o => o.path == tab.path)
  if(!havetab) {
    tabList.value.push(tab)
  }
  // 存储起来 不然刷新后就没了
  cookie.set("tabList", tabList.value)
}
// 路由更新之前 激活项改变 并且生成新的tab标签
onBeforeRouteUpdate((to, from) => {
  activeTab.value = to.path
  addTab({
    title: to.meta.title,
    path: to.path
  })
})
const changeTab = (t) => {
  activeTab.value = t
  router.push(t)
}
const deleteTab = (d) => {
  // 关闭之后 如果关闭的是已经选中的 应该向后移动一个选中 或者向前移动一个 如果不是就直接关闭
  let a = activeTab.value
  let tabs = tabList.value
  if(a == d) {
    tabs.forEach((item,index) => {
      if(item.path == d){
        const nextTab = tabs[index +1] || tabs[index - 1]
        if(nextTab) {
          a = nextTab.path
        }
      }
    })
  }
  console.log(a, activeTab.value,'1111')
  activeTab.value = a
  tabList.value = tabList.value.filter(item => item.path != d)
  cookie.set("tabList", tabList.value)
}
// 全部关闭 和关闭其他
// 全部关闭 和关闭其他
const handleClose = (c) => {
  if(c == 'clearAll') {
    // 切换回首页
    activeTab.value = "/"
    tabList.value = tabList.value.filter(item => item.path == '/')
  } else if(c == 'clearOther') {
    tabList.value = tabList.value.filter(item => item.path == '/' || item.path == activeTab.value)
  }
  cookie.set("tabList", tabList.value)
}
</script>


<style scoped>
.f-tag-list{
  @apply fixed bg-gray-100 flex items-center px-2;
  top: 64px;
  right: 0;
  height: 44px;
  z-index: 100;
}
.tag-btn{
  @apply bg-white rounded ml-auto flex items-center justify-center px-2;
  height: 32px;
}
:deep(.el-tabs__header){
  border: 0!important;
  height: 32px;
  @apply mb-0;
}
:deep(.el-tabs__nav){
  border: 0!important;
}
:deep(.el-tabs__item){
  border: 0!important;
  height: 32px;
  line-height: 32px;
  @apply bg-white mx-1 rounded;
}
:deep(.el-tabs__nav-next),:deep(.el-tabs__nav-prev){
  line-height: 32px;
  height: 32px;
}
:deep(.is-disabled){
  cursor: not-allowed;
  @apply text-gray-300;
}
</style>
